<template>
	<s-layout title="找车" :bgStyle="{ color: '#f5f5f5' }">
		<uv-index-list :index-list="state.indexList">
			<template v-for="(item, index) in state.dataList">
				<uv-index-item>
					<uv-index-anchor :text="state.indexList[index]" bgColor="#fbfbfd"></uv-index-anchor>
					<view class="list-cell ss-flex" v-for="(cell, index) in item" @click="goCarList(cell)">
						<image class="cell-icon" :src="cell.logo"></image>
						<view class="cell-name">{{cell.name}}</view>
					</view>
				</uv-index-item>
			</template>
		</uv-index-list>
	</s-layout>
</template>

<script setup>
	import { reactive } from 'vue';
	import sheep from '@/sheep';
	import { onLoad } from '@dcloudio/uni-app';
	import _ from 'lodash';
	
	const state = reactive({
		indexList: [],
		dataList: []
	})
	
	async function getCar(page = 1, list_rows = 9999) {
		const res = await sheep.$api.car.carIndex({
			list_rows,
			page,
			order: 1
		})
		state.indexList = _.uniq(res.data.data.map(item => item.initial))
		state.dataList = state.indexList.map(i => {
			return res.data.data.filter(item => item.initial == i)
		})
	}
	
	onLoad(async (options) => {
		await getCar();
	});
	
	function setData() {
		state.indexList = state.list.map(item => item.letter)
		state.dataList = state.list.map(item => item.data)
	}
	
	function bindClick() {
		
	}
	function goCarList(item) {
		sheep.$router.go('/pages/car/car-list?car_brand_id=' + item.id + '&title=' + item.name)
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		background-color: #fff;
		padding: 10rpx 30rpx;
		border-bottom: 1rpx solid #e5e5e5;
		
		.cell-icon {
			width: 80rpx;
			height: 80rpx;
		}
		.cell-name {
			margin-left: 20rpx;
		}
	}
</style>